<route lang="json5" type="payList">
{
  layout: 'default',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '设备管理 > 出货日志',
    enablePullDownRefresh:false
  },
}
</route>

<script setup lang="ts">
import dayjs from 'dayjs'
import { ref } from 'vue'
import { getPayList } from '@/api/device'

// 设备编号（筛选）
const query_sb_chked_rs = ref([''])
const sbList = ref([
  {
    label: '设备1',
    value: '123456',
  },
  {
    label: '设备2',
    value: '654321',
  },
])

// 商品分类（筛选）
const query_class_chked_rs = ref([''])
const categoryList = ref([
  {
    label: '幸运礼盒',
    value: '678362',
  },
  {
    label: '幸运礼盒2',
    value: '678362',
  },
])

const loadState = ref<'loading' | 'error' | 'finished'>('loading')
const page = ref(1)
function loadMore() {
  console.log('滚动到底部加载更多数据')
  getPayList({ page: page.value }).then((res: any) => {
    console.log(res)
    const { code, text } = res
    if (code === 0) {
      loadState.value = 'error'
      uni.showToast({
        title: text,
        icon: 'none',
      })

      // uni.redirectTo({
      //   url: '/pages/login/login',
      // })
    }
  })
}

const showEdit = ref(false)
const editRef = ref()
const formModel = ref({
  name: '',
  price: '',
  date: dayjs().format('YYYY-MM-DD HH:mm:ss'),

})
function handleSubmit() {
  editRef.value.validate().then(({ valid, errors }) => {
    if (valid) {
      console.log('表单验证通过')
      handleClose()
    }
    else {
      console.log('表单验证不通过')
    }
  })
}
function handleEdit() {
  showEdit.value = true
  if (editRef.value) {
    editRef.value.reset()
  }
}
function handleClose() {
  showEdit.value = false
}
</script>

<template>
  <div class="list-container">
    <div class="list-item">
      <div class="i-top flex-between">
        <div class="order">
          订单号：123456789012345678901
        </div>
        <div class="money">
          -200
        </div>
      </div>
      <div class="i-center flex-between">
        <div>购币数量：3000</div>
        <div class="return">
          已全额退款
        </div>
      </div>
      <div class="i-bottom flex-between">
        <div>微信支付</div>
        <div>2023-08-10 15:30:00</div>
      </div>
    </div>
    <div class="list-item">
      <div class="i-top flex-between">
        <div class="order">
          订单号：123456789012345678901
        </div>
        <div class="money">
          100
        </div>
      </div>
      <div class="i-center flex-between">
        <div>购币数量：200</div>
      </div>
      <div class="i-bottom flex-between">
        <div>支付宝支付</div>
        <div>2023-08-10 15:30:00</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#app {
  height: 100vh;
  overflow: hidden;
}
.flex-between{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list-container{
  background-color: #ffffff;
  padding: 0 10px;
}
.list-item{
  padding: 10px 0;
  border-bottom: 1rpx solid #dbdbdb;
}
.i-top{
  font-size: 14px;
  color: #333333;
}
.i-top .money{
  font-weight: bold;
}
.i-center,.i-bottom{
  font-size: 12px;
  color: #666666;
  padding-top: 8px;
}
.i-center .return{
  color: #e98c22;
}
</style>
